<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素遍历</title>
		<!-- 元素遍历：  用于DOM树中遍历元素 【理解：针对元素嵌套，父子级】
		   children()        功能：获取匹配元素集合中每个元素的子元素
		   parent()          功能：获取匹配元素集合中每个元素的父元素
		   
		   siblings()        功能：获取匹配元素集合每个元素的所有兄弟元素
		   
		   next()            功能：获取匹配元素集合中每一个的下一个兄弟元素
		   prev()            功能：获取匹配元素集合中每一个的下一个兄弟元素
		   
		   each()
		 -->
		 <style>
			 .container{
				 border: 1px solid #323232;
				 padding: 10px;
				 margin: 10px;
			 }
			 .box{
				 background-color: #55ffff;
				 padding: 10px;
				 margin: 10px;
			 }
			 button{
				 margin: 10px;
			 }
		 </style>
	</head>
	<body>
		<!-- html:   div.container 父级  6个div.box 每个#box1  子级 
		             6个按钮
			css：    .container添加样式  边框1px、内外边距10px
			         .box添加样式       背景色、内外边距10px
					 button添加样式     外边距：5px
			jq：     引入
		-->
		<div class="container">
			<div class="box" id="box1">盒子1</div>
			<div class="box" id="box2">盒子2</div>
			<div class="box" id="box3">盒子3</div>
			<div class="box" id="box4">盒子4</div>
			<div class="box" id="box5">盒子5</div>
			<div class="box" id="box6">盒子6</div>
		</div>
		<button id="gc">获取子元素</button>
		<button id="gp">获取父元素</button>
		<button id="gs">获取兄弟元素</button>
		<button id="gn">获取下一个兄弟元素</button>
		<button id="gr">获取上一个兄弟元素</button>
		<button id="loop">遍历元素</button>
	<script>
				/*1.点击 获取子元素 按钮   实现container下所有子元素添加背景色*/
				$("#gc").click(function() {
					//通过 父找子 函数 --添加效果
					$(".container").children().css("background-color", "#fff000")
				});
				/*2.点击 获取父元素  实现.container 添加背景色*/
				$("#gp").click(function() {
					$(".container").parent().css("background-color", "#ff0000")
				});
				/*3.点击   获取兄弟元素 按钮   实现除了 #box4 字体颜色不变，其他变色*/
				$("#gs").click(function() {
					$(".container").siblings().css()
				});
				/*4.点击 获取下一个兄弟元素 按钮 实现#box4 下一个兄弟，添加背景色*/
				$("#gn").click(function() {
					$(".container").next().css("background-color", "#55ffff")
				});
				/*5.点击 获取上一个兄弟元素 按钮 实现# box6 上一个兄弟 添加效果 
				                            圆、背景图、背景色、盒子阴影
					*/
			</script>
		</body>
	</html>